﻿@page
@{ Layout = "_Layout"; }
@section Styles{
  <style>
    .el-main {
      padding: 5px 5px 20px 5px;
      overflow: hidden;
    }
    #commands .el-button {
      margin-bottom: 5px;
    }
    #commands .el-button+.el-button {
      margin-left: 0;
    }
    .table-expand-form .el-form-item__label {
      width: 120px;
      color: #909399;
    }
    .table-expand-form .el-form-item {
      margin-right: 0;
      margin-bottom: 0;
      width: 50%;
    }
  </style>
}

<el-container>
  <el-aside width="100px">
    <el-tabs v-model="searchForm.searchType" tab-position="left" style="height: 100%;" v-on:tab-click="btnTabClick">
      <el-tab-pane label="全部" name="All"></el-tab-pane>
      <el-tab-pane label="我发布的" name="Admin"></el-tab-pane>
      <el-tab-pane label="用户投稿" name="User"></el-tab-pane>
    </el-tabs>
  </el-aside>

  <el-container>
    <el-main>
      <el-row>
        <el-col :span="20">
          <el-form ref="searchForm" :model="searchForm" :inline="true" size="small" label-width="100px">
            <el-form-item label="栏目" prop="channelIds" :rules="{ required: true, message: '请选择栏目' }">
              <el-cascader
                ref="channelIds"
                v-model="searchForm.channelIds"
                :options="[root]"
                :props="{ multiple: true, checkStrictly: true }"
                filterable
                placeholder="请选择栏目">
                <span slot-scope="{ node, data }">
                  {{ node.label }} ({{ data.count }})
                </span>
              </el-cascader>
            </el-form-item>
            <el-form-item>
              <el-checkbox v-model="searchForm.isAllContents" label="包含子栏目"></el-checkbox>
            </el-form-item>
            <el-form-item>
              <el-popover
                placement="top"
                width="580"
                trigger="click">
                <el-form size="mini" :model="searchForm" style="margin-top: 10px;" label-width="80px">
                  <el-form-item label="审核状态">
                    <el-checkbox-group v-model="searchForm.checkedLevels">
                      <el-checkbox v-for="level in checkedLevels" v-key="level.label" :label="level.label">{{level.text}}</el-checkbox>
                    </el-checkbox-group>
                  </el-form-item>
                  <el-form-item label="内容属性">
                    <el-checkbox label="置顶" v-model="searchForm.isTop"></el-checkbox>
                    <el-checkbox label="推荐" v-model="searchForm.isRecommend"></el-checkbox>
                    <el-checkbox label="热点" v-model="searchForm.isHot"></el-checkbox>
                    <el-checkbox label="醒目" v-model="searchForm.isColor"></el-checkbox>
                  </el-form-item>
                  <el-form-item label="内容分组" v-if="groupNames && groupNames.length > 0">
                    <el-checkbox-group v-model="searchForm.groupNames">
                      <el-checkbox v-for="groupName in groupNames" v-key="groupName" :label="groupName">{{groupName}}</el-checkbox>
                    </el-checkbox-group>
                  </el-form-item>
                  <el-form-item label="内容标签" v-if="tagNames && tagNames.length > 0">
                    <el-select
                      ref="tagNames"
                      v-model="searchForm.tagNames"
                      multiple
                      filterable
                      default-first-option
                      style="width: 100%;"
                      placeholder="请选择内容标签">
                      <el-option
                        v-for="tagName in tagNames"
                        :key="tagName"
                        :label="tagName"
                        :value="tagName">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-form>
                <div slot="reference" class="el-dropdown" style="float: right; margin-right: 10px;">
                  <el-badge v-if="isFiltered" is-dot class="item">
                    <span style="cursor: pointer;">
                      筛选<i class="el-icon-arrow-down el-icon--right"></i>
                    </span>
                  </el-badge>
                  <span v-else style="cursor: pointer;">
                    筛选<i class="el-icon-arrow-down el-icon--right"></i>
                  </span>
                </div>
              </el-popover>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="4" align="right">
          <el-form :inline="true" size="small" label-width="100px">
            <el-form-item>
              <el-popover
                id="sortColumns"
                placement="top"
                width="360"
                trigger="click">
                <div>
                  设置显示列
                </div>
                <el-table
                  :data="columns"
                  size="mini"
                  style="width: 100%; overflow: auto; max-height: 500px !important;">
                  <el-table-column prop="displayName"></el-table-column>
                  <el-table-column prop="attributeName"></el-table-column>
                  <el-table-column align="right" width="80">
                    <template slot-scope="scope">
                      <el-switch
                        v-model="scope.row.isList"
                        :disabled="scope.row.attributeName === 'Title'"
                        v-on:change="handleColumnsChange"
                        size="mini">
                      </el-switch>
                    </template>
                  </el-table-column>
                </el-table>
                <div slot="reference" class="el-dropdown" style="float: right;">
                  <span style="cursor: pointer;">
                    显示列<i class="el-icon-arrow-down el-icon--right"></i>
                  </span>
                </div>
              </el-popover>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="24">
          <el-form :inline="true" size="small" label-width="100px">
            <el-form-item label="添加日期">
              <el-col :span="11">
                <el-date-picker type="datetime" placeholder="选择开始日期" v-model="searchForm.startDate" style="width: 100%;"></el-date-picker>
              </el-col>
              <el-col class="line" :span="2" align="center">-</el-col>
              <el-col :span="11">
                <el-date-picker type="datetime" placeholder="选择结束日期" v-model="searchForm.endDate" style="width: 100%;"></el-date-picker>
              </el-col>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="24">
          <el-form size="small" label-width="100px">
            <el-form-item v-for="column in searchColumns" :key="column.attributeName" :label="column.displayName">
              <el-input v-model="column.value" placeholder="请输入搜索关键词">
                <el-button slot="append" v-on:click="btnSelectColumnClick(column)" icon="el-icon-remove-outline"></el-button>
              </el-input>
            </el-form-item>
          </el-form>
          <el-form size="small" label-width="100px">
            <el-form-item>
              <el-popover
                placement="top"
                width="400"
                trigger="click">
                <div>
                  <el-tag
                    v-for="column in columns"
                    v-if="column.isSearchable"
                    :key="column.attributeName"
                    type="primary"
                    style="cursor: pointer; margin: 0 3px 6px 0;"
                    v-on:click="btnSelectColumnClick(column)"
                    :effect="getColumnEffect(column)">
                    {{ column.displayName + '(' + column.attributeName + ')' }}
                  </el-tag>
                </div>
                <el-button slot="reference" size="mini" icon="el-icon-circle-plus-outline">
                  添加搜索项
                </el-button>
              </el-popover>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>

      <div style="height: 10px"></div>

      <el-divider></el-divider>
      <el-row align="center" style="margin-right: 5px; margin-top: 10px;">
        <el-col :span="24" align="center">
          <el-button size="small" type="primary" v-on:click="btnSearchClick">搜 索</el-button>
        </el-col>
      </el-row>
      
    </el-main>
  </el-container>
</el-container>

<el-container v-if="pageContents">
  <el-main>
    <el-divider></el-divider>
    <div style="height: 10px;"></div>

    @await Html.PartialAsync("_PartialContentsCommands")

    <div style="height: 10px;"></div>

    @await Html.PartialAsync("_PartialContents")
  </el-main>
</el-container>

@section Scripts{
<script src="/sitefiles/assets/js/admin/cms/contentsSearch.js" type="text/javascript"></script>
}
